<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
    <style>
        .f1{
            color:#e4393c;
            font-size:22px
        }
    </style>
</head>
<body>
    <div id="example"></div>


    <script type="text/babel">
       /* var f1= {
            color:'#e4393c',
            fontSize:50
        };
        var MyTitle = React.createClass({
            propTypes:{
                title:React.PropTypes.string.isRequired
            },
            render:function(){
                return <h1 style={this.props.cy}>{this.props.title}</h1>;
            }
        });
        ReactDOM.render(
                <MyTitle title="菜鸟教程2" cy={f1}/>,
                document.getElementById("example")
        );*/

        var Counter = React.createClass({
            getInitialState:function(){
                return {
                  clickCount:0
                };
            },
            handleClick:function(){
                this.setState(function(state){
                    return {clickCount:state.clickCount+1};
                });
            },
            componentWillReceiveProps:function(){
                console.log("属性改变");
            },
            componentWillUpdate:function(){
                console.log("更新完成");
            },
            shouldComponentUpdate:function(newProps,newState){
                console.log("是否更新？");
                console.log(newProps);
                console.log(newState);
                return true ;
            },
            render:function(){
                return (
                        <h2 onClick={this.handleClick}>点我，点击次数为{this.state.clickCount}</h2>
                );
            }
        });
        ReactDOM.render(
                <Counter />,
                document.getElementById("example")
        );
    </script>
</body>
</html>